<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页文档流理论演示</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            min-height: 100vh;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .intro {
            max-width: 800px;
            margin: 0 auto;
            color: #7f8c8d;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        @media (max-width: 900px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
        
        .demo-section {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .demo-container {
            height: 400px;
            border: 2px solid #3498db;
            border-radius: 5px;
            margin: 20px 0;
            padding: 15px;
            background: #ecf0f1;
            overflow: auto;
        }
        
        .demo-element {
            width: 100px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            border-radius: 5px;
            margin: 10px;
            transition: all 0.3s ease;
        }
        
        .element-1 { background: #3498db; }
        .element-2 { background: #2ecc71; }
        .element-3 { background: #e74c3c; }
        .element-4 { background: #f39c12; }
        .element-5 { background: #9b59b6; }
        .element-6 { background: #1abc9c; }
        
        .controls {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 20px 0;
        }
        
        .control-group {
            margin-bottom: 15px;
        }
        
        .control-group h3 {
            margin-bottom: 10px;
            color: #2c3e50;
            font-size: 1.1em;
        }
        
        .btn {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background: #3498db;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            text-align: left;
            margin-bottom: 8px;
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
        }
        
        .btn-active {
            background: #16a085;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
        }
        
        .explanation {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 5px;
            border-left: 4px solid #3498db;
        }
        
        .explanation h2 {
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .explanation p {
            margin-bottom: 15px;
        }
        
        .highlight {
            background: yellow;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        .info-box {
            background: #d1ecf1;
            border-left: 4px solid #0c5460;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        .flow-indicator {
            display: inline-block;
            padding: 5px 10px;
            background: #3498db;
            color: white;
            border-radius: 3px;
            font-size: 0.9em;
            margin-top: 10px;
        }
        
        .element-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }
        
        .element-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            background: #95a5a6;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .element-btn:hover {
            background: #7f8c8d;
        }
        
        .inline-demo {
            display: inline-block;
            width: 100px;
            height: 60px;
            background: #3498db;
            margin: 5px;
            color: white;
            text-align: center;
            line-height: 60px;
            border-radius: 5px;
        }
        
        .block-demo {
            display: block;
            width: 100%;
            height: 60px;
            background: #2ecc71;
            margin: 5px 0;
            color: white;
            text-align: center;
            line-height: 60px;
            border-radius: 5px;
        }
        
        footer {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
            color: #7f8c8d;
        }
    </style>
</head>
<body>
    <header>
        <h1>网页文档流理论演示</h1>
        <p class="intro">这个页面通过交互式演示帮助理解CSS文档流的概念，文档流是网页布局的基础。</p>
    </header>
    
    <div class="main-content">
        <div class="demo-section">
            <h2>文档流演示</h2>
            
            <div class="info-box">
                <p>当前文档流模式: <span class="flow-indicator" id="flowIndicator">正常流 (Normal Flow)</span></p>
                <p>尝试使用下面的控件修改布局行为，观察文档流的变化。</p>
            </div>
            
            <div class="controls">
                <div class="control-group">
                    <h3>显示属性</h3>
                    <button class="btn" onclick="changeDisplay('block')">块级元素 (Block)</button>
                    <button class="btn" onclick="changeDisplay('inline')">行内元素 (Inline)</button>
                    <button class="btn" onclick="changeDisplay('inline-block')">行内块 (Inline-Block)</button>
                    <button class="btn" onclick="changeDisplay('flex')">Flex 布局</button>
                </div>
                
                <div class="control-group">
                    <h3>定位方式</h3>
                    <button class="btn" onclick="changePosition('static')">静态定位 (Static)</button>
                    <button class="btn" onclick="changePosition('relative')">相对定位 (Relative)</button>
                    <button class="btn" onclick="changePosition('absolute')">绝对定位 (Absolute)</button>
                    <button class="btn" onclick="changePosition('fixed')">固定定位 (Fixed)</button>
                </div>
            </div>
            
            <div class="element-controls">
                <h3>元素操作:</h3>
                <button class="element-btn" onclick="addElement()">添加元素</button>
                <button class="element-btn" onclick="removeElement()">移除元素</button>
                <button class="element-btn" onclick="toggleFloat()">切换浮动</button>
                <button class="element-btn" onclick="resetDemo()">重置演示</button>
            </div>
            
            <div class="demo-container" id="demoContainer">
                <div class="demo-element element-1">元素 1</div>
                <div class="demo-element element-2">元素 2</div>
                <div class="demo-element element-3">元素 3</div>
                <div class="demo-element element-4">元素 4</div>
            </div>
        </div>
        
        <div class="explanation">
            <h2>文档流理论</h2>
            
            <p><strong>文档流</strong>是指HTML元素在页面上排列和相互影响的规则。理解文档流是掌握CSS布局的关键。</p>
            
            <h3>正常流 (Normal Flow) （/ˈnɔːm(ə)l/） </h3>
            <p>这是元素的默认布局方式：</b></p>
            <b style="color: red;">从左到右<br></b>
            <div class="inline-demo">行内元素</div>
            <div class="inline-demo">水平排列</div>
            
            <div class="block-demo">块级元素</div>
            <div class="block-demo">垂直排列</div>
            <b style="color: red;">从上到下<br></b>
            
            <h3>脱离文档流</h3>
            <p>某些CSS属性可以使元素脱离正常文档流：</p>
            <ul>
                <li><strong>浮动 (Float)</strong> - 元素向左或向右浮动，其他内容环绕它</li>
                <li><strong>绝对定位 (Absolute Positioning)</strong> - 元素相对于最近的非static定位祖先元素定位</li>
                <li><strong>固定定位 (Fixed Positioning)</strong> - 元素相对于浏览器窗口定位</li>
            </ul>
            
            <h3>显示属性 (Display)</h3>
            <p>display属性影响元素如何参与文档流：</p>
            <ul>
                <li><strong>block</strong> - 元素占据整个可用宽度，从新行开始</li>
                <li><strong>inline</strong> - 元素只占据必要的宽度，不断行</li>
                <li><strong>inline-block</strong> - 类似inline，但可以设置宽度和高度</li>
                <li><strong>flex</strong> - 启用弹性盒子布局</li>
                <li><strong>grid</strong> - 启用网格布局</li>
            </ul>
            
            <div class="info-box">
                <p><strong>提示：</strong> 在左侧演示区域尝试不同的布局模式，观察元素如何根据文档流规则排列。</p>
            </div>
        </div>
    </div>
    
    <footer>
        <p>[羽神同行]CSS陪跑训练营 &copy; EOVA.CN</p>
    </footer>

    <script>
        // 获取演示容器和指示器
        const demoContainer = document.getElementById('demoContainer');
        const flowIndicator = document.getElementById('flowIndicator');
        let isFloating = false;
        let elementCount = 4;
        
        // 更改显示属性
        function changeDisplay(displayType) {
            const elements = demoContainer.querySelectorAll('.demo-element');
            
            elements.forEach(element => {
                element.style.display = displayType;
            });
            
            // 更新指示器
            let displayText = '';
            switch(displayType) {
                case 'block':
                    displayText = '块级元素 (Block)';
                    break;
                case 'inline':
                    displayText = '行内元素 (Inline)';
                    break;
                case 'inline-block':
                    displayText = '行内块元素 (Inline-Block)';
                    break;
                case 'flex':
                    displayText = 'Flex 布局';
                    demoContainer.style.display = 'flex';
                    demoContainer.style.flexWrap = 'wrap';
                    break;
            }
            
            flowIndicator.textContent = displayText;
            
            // 更新按钮状态
            updateButtonStates('display', displayType);
        }
        
        // 更改定位方式
        function changePosition(positionType) {
            const elements = demoContainer.querySelectorAll('.demo-element');
            
            elements.forEach(element => {
                element.style.position = positionType;
                
                // 为相对定位添加一些偏移
                if (positionType === 'relative') {
                    element.style.top = '0';
                    element.style.left = '0';
                }
                
                // 为绝对定位添加一些偏移
                if (positionType === 'absolute') {
                    element.style.top = 'auto';
                    element.style.bottom = 'auto';
                    element.style.left = 'auto';
                    element.style.right = 'auto';
                }
            });
            
            // 更新指示器
            let positionText = '';
            switch(positionType) {
                case 'static':
                    positionText = '静态定位 (Static)';
                    break;
                case 'relative':
                    positionText = '相对定位 (Relative)';
                    break;
                case 'absolute':
                    positionText = '绝对定位 (Absolute)';
                    break;
                case 'fixed':
                    positionText = '固定定位 (Fixed)';
                    break;
            }
            
            flowIndicator.textContent = positionText;
            
            // 更新按钮状态
            updateButtonStates('position', positionType);
        }
        
        // 切换浮动
        function toggleFloat() {
            const elements = demoContainer.querySelectorAll('.demo-element');
            
            isFloating = !isFloating;
            
            elements.forEach(element => {
                if (isFloating) {
                    element.style.float = 'left';
                    flowIndicator.textContent = '浮动 (Float)';
                } else {
                    element.style.float = 'none';
                    flowIndicator.textContent = '正常流 (Normal Flow)';
                }
            });
        }
        
        // 添加元素
        function addElement() {
            if (elementCount >= 8) return;
            
            elementCount++;
            const newElement = document.createElement('div');
            newElement.className = `demo-element element-${elementCount % 6 || 6}`;
            newElement.textContent = `元素 ${elementCount}`;
            
            demoContainer.appendChild(newElement);
        }
        
        // 移除元素
        function removeElement() {
            if (elementCount <= 1) return;
            
            const lastElement = demoContainer.lastElementChild;
            if (lastElement) {
                demoContainer.removeChild(lastElement);
                elementCount--;
            }
        }
        
        // 重置演示
        function resetDemo() {
            const elements = demoContainer.querySelectorAll('.demo-element');
            
            elements.forEach(element => {
                element.style.display = 'block';
                element.style.position = 'static';
                element.style.float = 'none';
                element.style.top = '';
                element.style.left = '';
            });
            
            demoContainer.style.display = 'block';
            demoContainer.style.flexWrap = 'nowrap';
            
            flowIndicator.textContent = '正常流 (Normal Flow)';
            isFloating = false;
            
            // 重置按钮状态
            updateButtonStates('reset');
        }
        
        // 更新按钮状态
        function updateButtonStates(type, value) {
            const buttons = document.querySelectorAll('.btn');
            
            buttons.forEach(button => {
                button.classList.remove('btn-active');
            });
            
            if (type === 'reset') {
                return;
            }
            
            const activeButton = Array.from(buttons).find(button => 
                button.textContent.includes(value)
            );
            
            if (activeButton) {
                activeButton.classList.add('btn-active');
            }
        }
    </script>
</body>
</html>